<template>
    <el-container class="home-view">
        <el-header class="home-header">
            <el-row class="home-header-content">
                <el-col :span="12"><h1 class="home-header-content-left">版本管理小工具</h1></el-col>
                <el-col :span="12">
                    <div class="home-header-content-right">
                        <div class="menu-group">
                            <el-tooltip placement="top" effect="light">
                                <div slot="content">首页</div>
                                <el-button type="primary" size="mini" circle @click="toHomeView">
                                    <i class="fa fa-home" title="首页"/>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip placement="top" effect="light">
                                <div slot="content">设置人员</div>
                                <el-button type="primary" size="mini" circle @click="toPersonView">
                                    <i class="fa fa-user" title="人员"/>
                                </el-button>
                            </el-tooltip>

                            <el-tooltip placement="top" effect="light">
                                <div slot="content">设置角色</div>
                                <el-button type="primary" size="mini" circle @click="toRoleView">
                                    <i class="fa fa-address-book" title="角色"/>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip placement="top" effect="light">
                                <div slot="content">退出登录</div>
                                <el-button type="primary" size="mini" circle @click="logout">
                                    <i class="fa fa-sign-out" title="退出"/>
                                </el-button>
                            </el-tooltip>

                        </div>
                        <span class="user-tips">欢迎，lanhui</span>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main class="home-main">
            <router-view class="home-main-router"/>
        </el-main>
        <el-footer class="home-footer">
            <div>author: lanhui</div>
        </el-footer>
    </el-container>
</template>
<script>
    export default {
        name: 'Login',
        data() {
            return {
                form: {
                    userName: '',
                    password: ''
                }
            }
        },
        methods: {
            logout: function(){
                this.$router.replace({name: "login"});
            },
            toHomeView: function(){
                if(this.$route.name !== 'project'){
                    this.$router.replace({name: "project"});
                }
            },
            toPersonView: function(){
                this.$router.push({name: "person"});
            },
            toRoleView: function(){
                this.$router.push({name: "role"});
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/var.scss";
    .home-view{

        margin: 0 auto;
        width: 10rem;
        height: 100%;
        background: #fafafa;
        font-size: 0.14rem;

        .home-header{
            width: 100%;
            height: 0.6rem;
            background: #c3d7df;

            border-bottom: 1px dashed #144a74;

            .home-header-content{
                width: 100%;

                .home-header-content-left{
                    text-align: left;
                }

                .home-header-content-right{
                    /*line-height: 0.6rem;*/
                    margin-top: 0.3rem;

                    .menu-group{
                        float: right;
                    }

                    .user-tips{
                        float: right;
                        margin-right: 0.2rem;
                        line-height: 0.3rem;
                        font-size: 0.14rem;
                    }
                }

            }
        }
        .home-main{
            height: calc(100% - 1.1rem);
            overflow: auto;
            background: #fdfdfd;
            padding: 0;

            .home-main-router{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
        }
        .home-footer{
            height: 0.5rem;
            line-height: 0.5rem;
            background: #c3d7df;
        }
    }
</style>
